<template>
  <el-row type="flex" class="room-container">
    <el-row type="flex" class="live-video">
      <video-player
        role="teacher"
        :domId="`stream-player-${teacher.uid}`"
        :id="teacher.uid"
        :account="teacher.account"
        :streamID="teacher.streamID"
        :stream="teacher.stream"
        :audio="Boolean(teacher.audio)"
        :video="Boolean(teacher.video)"
        :local="teacher.local"
        v-if="!$util.isEmpty(teacher)"
      ></video-player>

      <video-player v-else role="teacher" :account="'teacher'" id="0"></video-player>
      <template v-if="!$util.isEmpty(students)">
        <video-player
          role="student"
          :domId="`stream-player-${item.uid}`"
          :id="item.uid"
          :account="item.account"
          :streamID="item.streamID"
          :stream="item.stream"
          :audio="Boolean(item.audio)"
          :video="Boolean(item.video)"
          :local="item.local"
          v-for="(item, index) in students"
          :key="`${index}${item.streamID}`"
        ></video-player>
      </template>
    </el-row>
    <el-row type="flex" class="main-container">
      <el-row
        type="flex"
        class="live-container"
        v-loading.lock="roomLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <white-board v-if="whiteBoardStatus"></white-board>
      </el-row>
      <el-row type="flex" class="live-board">
        <el-row type="flex" class="chat-board">
          <el-row type="flex" justify="center" class="menu">
            <div
              class="item"
              :class="active === 'chatroom' ? 'active' : ''"
              @click="setActive('chatroom')"
            >
              聊天
            </div>
            <div
              class="item"
              :class="active === 'studentList' ? 'active' : ''"
              @click="setActive('studentList')"
              v-if="roomStore.state.me.role == 1"
            >
              成员({{ memberCount }})
            </div>
          </el-row>
          <el-row type="flex" class="chat-container" :class="active === 'chatroom' ? '' : 'hide'">
            <chat-panel></chat-panel>
          </el-row>
          <el-row
            type="flex"
            class="student-container"
            :class="active !== 'chatroom' ? '' : 'hide'"
          >
            <student-list></student-list>
          </el-row>
        </el-row>
      </el-row>
    </el-row>
  </el-row>
</template>

<script>
import { mapState } from 'vuex'
import { roomStore } from './utils/room'
import VideoPlayer from './components/video-player'
import WhiteBoard from './components/whiteboard'
import ChatPanel from './components/chat-panel'
import StudentList from './components/student-list'
export default {
  components: { VideoPlayer, WhiteBoard, ChatPanel, StudentList },
  data() {
    return {
      roomStore: roomStore,
      room: null,
      active: 'chatroom'
    }
  },
  computed: {
    ...mapState('live', ['roomLoading', 'whiteBoardStatus']),
    teacher() {
      const userAttrs = this.roomStore.state.users
      const me = this.roomStore.state.me
      const course = this.roomStore.state.course
      if (!course.teacherId || !me.uid) return
      const teacherUid = course.teacherId
      let teacherInfo = {}
      userAttrs.forEach(item => {
        if (item.uid == teacherUid) {
          teacherInfo = item
        }
      })
      if (this.$util.isEmpty(teacherInfo)) return
      // 当本地流为老师时
      if (me.uid == teacherUid) {
        return {
          ...this.roomStore.state.rtc.localStream,
          account: teacherInfo.account,
          video: teacherInfo.video,
          audio: teacherInfo.audio,
          local: true
        }
      } else {
        // 当远端流为老师时
        let meTeacherUid = ''
        this.roomStore.state.rtc.users.forEach(item => {
          if (item == +course.teacherId) {
            meTeacherUid = item
          }
        })
        if (!meTeacherUid) return null
        // 当找到老师的音视频流时
        let remoteTeacherStream = {}
        let data = null
        this.roomStore.state.rtc.remoteStreams.forEach(item => {
          if (item.uid == +teacherUid) {
            remoteTeacherStream = item
          }
        })
        if (!this.$util.isEmpty(remoteTeacherStream)) {
          data = {
            ...remoteTeacherStream,
            uid: meTeacherUid,
            account: teacherInfo.account,
            video: teacherInfo.video,
            audio: teacherInfo.audio
          }
        }
        return data
      }
    },
    students() {
      const userAttrs = this.roomStore.state.users
      const me = this.roomStore.state.me
      if (!me.uid || userAttrs.length == 0) return []
      const course = this.roomStore.state.course
      const teacherUid = course.teacherId
      // 排除老师，屏幕共享，和自己的uid
      let studentIds = []
      userAttrs.forEach(item => {
        if (item.uid !== +teacherUid && item.uid !== +me.uid) {
          studentIds.push(item)
        }
      })
      let studentStreams = []
      // 当自己是学生流时
      if (+me.role == 2) {
        let myAttr = {}
        userAttrs.forEach(item => {
          if (item.uid == +me.uid) {
            myAttr = item
          }
        })
        if (myAttr && this.roomStore.state.rtc.localStream) {
          const _tmpStream = {
            ...this.roomStore.state.rtc.localStream,
            account: myAttr.account,
            video: myAttr.video,
            audio: myAttr.audio,
            local: true
          }
          studentStreams.push(_tmpStream)
        }
      }

      // 所有远端的学生流
      for (let studentId of studentIds) {
        let studentAttr = {}
        let stream = {}
        userAttrs.forEach(item => {
          if (item.uid == studentId.uid) {
            studentAttr = item
          }
        })
        this.roomStore.state.rtc.remoteStreams.forEach(item => {
          if (item.uid == studentId.uid) {
            stream = item
          }
        })
        if (!this.$util.isEmpty(studentAttr) && !this.$util.isEmpty(stream)) {
          let _tmpStream = {
            ...stream,
            uid: studentId.uid,
            account: studentAttr.account,
            video: studentAttr.video,
            audio: studentAttr.audio
          }
          studentStreams.push(_tmpStream)
        }
      }
      return studentStreams
    },
    // 成员数量
    memberCount() {
      let count = this.roomStore.state.course.memberCount
      let role = this.roomStore.state.me.role
      if (role === 1 && count) {
        return count - 1
      }
      return 0
    }
  },
  methods: {
    setActive(active) {
      if (active !== 'chatroom') {
        this.active = 'studentList'
      } else {
        this.active = 'chatroom'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './big-class.scss';
.chat-board {
  flex: 1;
  min-width: 280px;
  max-width: 280px;
  flex-direction: column;
  .menu {
    height: 45px;
    border-bottom: 2px solid #606266;
    .item {
      font-size: 14px;
      color: #fff;
      padding: 14px 0;
      margin: 0 35px;
      cursor: pointer;
      text-align: center;
      border-bottom: 2px solid #606266;
      margin-bottom: -2px;
      &.active {
        @include edu-color-auxiliary;
        @include edu-color-primary(border-color);
      }
    }
  }
  .chat-container {
    flex: 1;
    flex-direction: column;
    &.hide {
      display: none;
    }
  }
  .student-container {
    flex: 1;
    flex-direction: column;
    &.hide {
      display: none;
    }
  }
}
</style>
